<template>
	<div>
		<!-- 交易密码弹窗 -->
		<div class="confirms">

			<van-popup v-model="confirmShow" :close-on-click-overlay="false">
				<div>
					<div class="title">请输入交易密码</div>

					<div style="width:4.5rem;margin: auto;">
						<van-password-input :value="passowrd" :length="6" :gutter="6" :focused="showKeyboard" @focus="showKeyboard = true" />

					</div>

					<div class="bottom_btn">
						<div @click="confirmShow = false">取消</div>
						<div @click="fatherMethods">确定</div>
					</div>

				</div>
			</van-popup>
		</div>


		<van-number-keyboard :show="showKeyboard" @input="onInput" @delete="onDelete" @blur="showKeyboard = false" />
	</div>
</template>

<script>
	import Vue from 'vue';
	import {
		PasswordInput,
		NumberKeyboard,
		Stepper
	} from 'vant';

	Vue.use(PasswordInput);
	Vue.use(NumberKeyboard);
	
	export default{
		name:"InputPassword",
		data(){
			return{
				// 键盘输入显示
				confirmShow:false,
				
				passowrd:"",
				
				//输入密码弹窗
				showKeyboard:false,
			}
		},
		methods:{
			open(option){
				
				this.passowrd = ""
				
				this.confirmShow = true
				this.showKeyboard = true
				
				this.fatherMethods = option.methods ? option.methods : ''
				
			},
			fatherMethods(){
				
			},
			onInput(key) {
			  this.passowrd = (this.passowrd + key).slice(0, 6);
			},
			onDelete() {
			  this.passowrd = this.passowrd.slice(0, this.passowrd.length - 1);
			}
		},
		watch:{
			passowrd: function(){
				if(this.passowrd.length >= 6) this.fatherMethods();
			}
		}
	}
</script>

<style lang="less" scoped>
	.confirms {
		.title {
			color: #94E9FF;
			font-size: .32rem;
			text-align: center;
			margin-top: .59rem;
			margin-bottom: .67rem;
		}

		.van-popup {
			width: 5.65rem;
			height: 3.77rem;
			background-color: rgb(15, 34, 58);
			box-shadow: inset 0px 0px .2rem 0px rgba(28, 176, 212, 1);
			border-radius: .2rem;
		}

		.van-password-input__security li {
			background-color: transparent;
			border: 1px solid #94E9FF;
			height: .5rem;
			width: .5rem;
		}

		.van-password-input__security i {
			background-color: #94E9FF;
		}

		.van-password-input__cursor {
			background-color: #94E9FF;
		}

		.bottom_btn {
			display: flex;
			align-items: center;
			justify-content: space-around;

			div {
				text-align: center;
				line-height: .44rem;
				font-size: .3rem;
				width: 1.5rem;
				height: .44rem;
				border-radius: .1rem;
				// color: pink;
			}

			>div:nth-child(1) {
				color: #94E9FF;
				box-shadow: inset 0px 0px .2rem 0px rgba(28, 176, 212, 1);
			}

			>div:nth-child(2) {
				color: #0F2138;
				background: linear-gradient(0deg, rgba(28, 206, 244, 1), rgba(0, 254, 202, 1));
				border-radius: .1rem;
			}
		}

	}

	.van-number-keyboard {
		z-index: 9999;
	}
</style>
